'use client'

import { Link } from '@/src/navigation'
import { useEffect } from 'react'

interface ErrorProps {
  error: Error
  reset: () => void
}

const Error: React.FC<ErrorProps> = (props) => {
  const { error, reset } = props

  useEffect(() => {
    console.log(`
    SSR Error: 
    ${error}
    `)
  }, [error])

  return (
    <div className='flex flex-col justify-center items-center w-full h-full'>
      <h1 className='text-2xl'>😵</h1>
      <div className='h-2'></div>
      <p>Something went wrong!</p>
      <div className='h-6'></div>
      <Link
        href='/'
        className='flex justify-center items-center px-[0.96875rem] py-[0.8125rem] text-white bg-black lg:px-[1.6875rem] lg:py-[1.0625rem] 2xl:px-[2.53125rem] 2xl:py-[1.59375rem] hover:bg-gray-700 transition-colors duration-200'
      >
        Back home
      </Link>
    </div>
  )
}

export default Error
